//引入路由组件
import Home from '@/views/Home';
import Search from '@/views/Search';
import Login from '@/views/Login';
import Register from '@/views/Register';
import Detail from '@/views/Detail'
import AddCartSuccess from '@/views/AddCartSuccess'
import ShopCart from '@/views/ShopCart'
import Trade from "@/views/Trade"
import Pay from "@/views/Pay"
import PaySuccess from '@/views/PaySuccess'
import Center from '@/views/Center'

//引入二级路由组件
import myOrder from '@/views/Center/myOrder'
import groupOrder from '@/views/Center/groupOrder'


/* 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效 */
const foo = () => {
    return import("@/views/Home")
}



//路由配置信息
export default [
    {
        path: '/center',
        name: 'center',
        component: Center,
        meta: { show: true },
        //二级路由组件
        children: [
            {
                path: 'myorder',
                component: myOrder,
            },
            {
                path: 'grouporder',
                component: groupOrder,
            },
            {
                path: '/center',
                redirect: '/center/myorder'
            }
        ]
    },
    {
        path: '/paysuccess',
        name: 'paysuccess',
        component: PaySuccess,
        meta: { show: true }
    },
    {
        path: '/pay',
        name: 'pay',
        component: Pay,
        meta: { show: true },
        //路由独享守卫
        beforeEnter: (to, from, next) => {
            //去支付页面必须是从交易页面而来,而不能是从其他页面而来
            if (from.path == '/trade') {
                next()
            } else {
                //中断当前的导航
                next(false)
            }
        }
    },
    {
        path: '/trade',
        name: 'trade',
        component: Trade,
        meta: { show: true },
        //路由独享守卫
        beforeEnter: (to, from, next) => {
            //去交易页面必须是从购物车而来,而不能是从其他页面而来
            if (from.path == '/shopcart') {
                next()
            } else {
                //中断当前的导航
                next(false)
            }
        }
    },
    {
        path: '/shopcart',
        name: 'shopcart',
        component: ShopCart,
        meta: { show: true }
    },
    {
        //路由的路径一定是小写的
        path: '/addcartsuccess',
        name: 'addcartsuccess',
        component: AddCartSuccess,
        meta: { show: true }
    },
    {
        path: '/detail/:skuid?',
        component: Detail,
        meta: { show: true }
    },
    {
        path: '/home',
        // component: foo,
        //路由懒加载简写形式
        component: () => import("@/views/Home"),
        meta: { show: true }
    },
    {
        path: '/search/:keyword?',
        component: Search,
        meta: { show: true },
        name: 'search',
        //路由组件传递props数据
        //布尔值写法: 只能传递params
        // props: true

        //对象写法:额外给路由组件传递props
        // props: { a: 1, b: 2 }

        //函数写法:可以把params参数,query参数,通过props传递给路由组件
        props: ($route) => {
            return { keyword: $route.params.keyword, k: $route.query.k }
        }

        //简化写法
        // props: ($route) =>({ keyword: $route.params.keyword, k: $route.query.k }) 
    },
    {
        path: '/login',
        component: Login,
        meta: { show: false }

    },
    {
        path: '/register',
        component: Register,
        meta: { show: false }

    },
    //重定向,在项目跑起来的时候,访问/,立马让他定向到首页
    {
        path: '*',
        redirect: '/home'
    }
]